<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小白客户端</title>
</head>
<body>
发消息的客户端:
<input type="text" th:value="${cid}" id="cid"/>
<p>【toUserId】：
<div><input id="toUserId" name="toUserId" type="text"></div>
<p>【toUserId】：
<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>【操作】：
<div>
    <button type="button" onclick="sendMessage()">发送消息</button>
</div>
</body>

<script type="text/javascript">
    var socket;
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        // 实现化WebSocket对象，指定要连接的服务器地址与端口建立连接
        var cid = document.getElementById("cid").value;
        var reqUrl = "http://localhost:8081/websocket/" + cid;
        socket = new WebSocket(reqUrl.replace("http", "ws"));
        // 打开事件
        socket.onopen = function () {
            console.log("Socket 已打开");
        };
        // 获得消息事件
        socket.onmessage = function (msg) {
            console.log("onmessage--" + msg.data);
            // 发现消息进入，开始处理前端触发逻辑
        };
        // 关闭事件
        socket.onclose = function () {
            console.log("Socket已关闭");
        };
        // 发生了错误事件
        socket.onerror = function () {
            alert("Socket发生了错误");
            // 此时可以尝试刷新页面
        }
    }

    function sendMessage() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            var selfId = document.getElementById('cid').value;
            var toUserId = document.getElementById('toUserId').value;
            var contentText = document.getElementById('contentText').value;
            var msg = '{"cid":"' + selfId + '","sid":"' + toUserId + '","message":"' + contentText + '"}';
            console.log(msg);
            socket.send(msg);
        }
    }
</script>
</html>

